<template>
  <todoItem 
      v-for="(item, index) of todoArr" 
      :key="index"
      :id="item.id"
      :title="item.title"
      @toggle="toggle"
      :checked="item.checked"/>
 
</template>

<script lang="ts">
import { defineComponent, toRefs } from 'vue'
import todoItem from './todoItem.vue'

export default defineComponent({
  props: {
    todoArr: Array
  },
  emits: ['toggle'],
  components: {todoItem},
  setup(props, {emit}) {
    const {todoArr} = toRefs(props)

    const toggle = (e: number) => {
      emit('toggle', e)
    }

    return {
      toggle
    }
  },
})
</script>